/*
1. react 数据传递载体  props 属性  state 状态  组件之间数据交互  

2. props
a.  props 默认从组件外部（父组件）传入,props 也能在组件内部初始化定义 getDefaultProps 15 
b.  组件内部 通过生命周期钩子函数 getDefaultProps (已废弃 )   App.defaultProps = {}
c.  props 一般不允许被修改   props 只用来传递数据
d.  props 接收  对象 常量 函数  数组  
e.  props 在组件内部 通过 this.props 来获取  key-value 
f.  props 外部传入的 优先级高于 内部初始 
*/ 

import PropTypes from "prop-types"
import {MyBtn} from "./MyBtn"
const obj = {
    age:19,
    name:"zkl",
    word:"大声背面试题",
    list:[2107,2105,2103,2101]
}
export class PropsOne extends Component{
  render(){
    return (
      <div>
        <h2> react 组件通信  ==  props </h2>
        <p>props 只可读不可改</p>
        <ChildOne
         id={2107}
         msg="daydayup"
         text="Are you OK"
         obj={obj}
         {...obj}
        ></ChildOne>
        <MyBtn
          text='点击登录'
          style={{background:"#0f0",color:'#000'}}
          onClick={()=>console.log('开始登录')}
        ></MyBtn>
      </div>
    )
  }
}

class ChildOne extends Component{
  changeProps=()=>{
    this.props.id+=100;
  }
  render(){
    console.log(this.props)
    const {
      id,msg,text, word
    } = this.props 
    return (
      <div>
        <h2> ChildOne - ChildOne - ChildOne</h2>
        <p>我的 props </p>
        <p onClick={this.changeProps} > {id} --- {text} -- {msg}</p>
      </div>
    )
  }
}

// 定义组件内部的props 
ChildOne.defaultProps = {
    id:2000,
    word:"2107-天道酬勤"
}

ChildOne.propTypes = {
  id:PropTypes.number.isRequired,
  msg:PropTypes.string.isRequired,
  list:PropTypes.array
}

// props 校验 
// PropTypes  校验Props 
// optionalArray: PropTypes.array,
// optionalBool: PropTypes.bool,
// optionalFunc: PropTypes.func,
// optionalNumber: PropTypes.number,
// optionalObject: PropTypes.object,
// optionalString: PropTypes.string,
// optionalSymbol: PropTypes.symbol,

// 校验 props 接收正确的格式类型的数据 